<app-toolbar>
  <nz-space>
    <button nz-button *nzSpaceItem nzType="default" (click)="clear()">清空</button>
    <button nz-button *nzSpaceItem nzType="primary" (click)="add()">添加</button>
  </nz-space>
</app-toolbar>


<nz-table [nzData]="formArray.controls" [nzFrontPagination]="false" nzSize="small" [formGroup]="formGroup">
  <thead>
  <tr>
    <th>变量</th>
    <th>名称</th>
    <th>单位</th>
    <th>代码</th>
    <th>地址</th>
    <th>类型</th>
    <th>小端模式</th>
    <th>小数点位</th>
    <th>默认值</th>
    <th>操作</th>
  </tr>
  </thead>
  <tbody formGroupName="items" cdkDropList (cdkDropListDropped)="drop($event)">
  <tr *ngFor="let data of formArray.controls; let i=index" [formGroupName]="i" cdkDrag>
    <td>
      <input nz-input formControlName="name" nzSize="small" (change)="change()" required/>
    </td>
    <td>
      <input nz-input formControlName="label" nzSize="small" (change)="change()"/>
    </td>
    <td>
      <input nz-input formControlName="unit" nzSize="small" (change)="change()"/>
    </td>
    <td>
<!--      <input nz-input formControlName="code" nzSize="small" (change)="change()"/>-->
      <nz-select formControlName="code" nzSize="small" (ngModelChange)="change()" (change)="change()" required>
        <nz-option [nzValue]="code.name" [nzLabel]="code.label" *ngFor="let code of codes"></nz-option>
      </nz-select>
    </td>
    <td>
      <input nz-input formControlName="address" nzSize="small" (change)="change()"/>
    </td>
    <td>
      <nz-select formControlName="type" nzSize="small" (ngModelChange)="change()" (change)="change()" required>
        <nz-option nzValue="bit" nzLabel="BIT"></nz-option>
        <nz-option nzValue="byte" nzLabel="BYTE"></nz-option>
        <nz-option nzValue="word" nzLabel="WORD"></nz-option>
        <nz-option nzValue="dword" nzLabel="DWORD"></nz-option>
        <nz-option nzValue="qword" nzLabel="QWORD"></nz-option>
        <nz-option nzValue="short" nzLabel="SHORT"></nz-option>
        <nz-option nzValue="int" nzLabel="INT"></nz-option>
        <nz-option nzValue="long" nzLabel="LONG"></nz-option>
        <nz-option nzValue="float" nzLabel="FLOAT"></nz-option>
        <nz-option nzValue="double" nzLabel="DOUBLE"></nz-option>
      </nz-select>
    </td>
    <td>
      <label nz-checkbox formControlName="le" (change)="change()" (ngModelChange)="change()"></label>
    </td>
    <td>
      <nz-select formControlName="precision" nzSize="small" (ngModelChange)="change()" (change)="change()" required>
        <nz-option [nzValue]="0" nzLabel="0"></nz-option>
        <nz-option [nzValue]="1" nzLabel="1"></nz-option>
        <nz-option [nzValue]="2" nzLabel="2"></nz-option>
        <nz-option [nzValue]="3" nzLabel="3"></nz-option>
        <nz-option [nzValue]="4" nzLabel="4"></nz-option>
      </nz-select>
    </td>
    <td>
      <label nz-checkbox formControlName="store" (change)="change()" (ngModelChange)="change()"></label>
    </td>
    <td>
      <a cdkDragHandle title="移动">
        <i nz-icon nzType="drag" nzTheme="outline"></i>
      </a>
      <nz-divider nzType="vertical"></nz-divider>
      <a cdkDragHandle title="复制" (click)="copy(i)">
        <i nz-icon nzType="copy" nzTheme="outline"></i>
      </a>
      <nz-divider nzType="vertical"></nz-divider>
      <a nz-popconfirm nzPopconfirmTitle="确定删除?" (nzOnConfirm)="remove(i)" title="删除">
        <i nz-icon nzType="delete" nzTheme="outline"></i>
      </a>
    </td>
  </tr>
  </tbody>
</nz-table>
